<template>
  <el-dialog
    class="detailDialog"
    v-model="props.inOutDialog"
    :title="props.inOutForm?.title + '详情'"
    width="45%"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-row class="row">
      <el-col :span="8">
        <div>备件名称：{{ props.inOutForm?.info.partName }}</div>
      </el-col>
      <el-col :span="8">
        <div>备件类型：{{ props.inOutForm?.info.partTypeName }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>
          操作类型：{{
            props.inOutForm?.title == '出库'
              ? props.inOutForm?.form.retrievalType
              : props.inOutForm?.form.warehouseType
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <div>操作前数量：{{ props.inOutForm?.form.startAmount }}</div>
      </el-col>
      <el-col :span="8">
        <div>操作后数量：{{ props.inOutForm?.form.surplusAmount }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>
          {{ props.inOutForm?.title }}时间：{{
            props.inOutForm?.form.createTime
          }}
        </div>
      </el-col>
    </el-row>
    <div class="info">{{ props.inOutForm?.title }}批次信息</div>
    <el-row class="row">
      <el-col :span="8">
        <div>
          {{ props.inOutForm?.title }}数量：{{
            props.inOutForm?.form.totalAmount
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div v-for="item in props.inOutForm?.form.partDetails" class="pcInfo">
          <span>{{ props.inOutForm?.title }}批次：{{ item.batchNum }}</span>
          <span>{{ props.inOutForm?.title }}数量：{{ item.amount }}</span>
          <span>单价：{{ item.price }}元</span>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps({
  inOutDialog: Boolean,
  inOutForm: Object
})
const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}
</script>
<style scoped lang="scss">
.detailDialog {
  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }

  .info {
    font-size: 18px;
    font-weight: 600;
  }
}

.pcInfo {
  margin-bottom: 8px;

  > span {
    margin-right: 16px;
    font-weight: 400;
    line-height: 22px;
  }
}
</style>
